<template>
	<!-- <div>
		<monaco-editor></monaco-editor>
	</div> -->

	<el-container>
		<el-header>
			<el-form :inline="true">
				<el-form-item label="">
					<el-cascader
						v-model="form.langs"
						:options="langsList"
						:props="langsProps"
						:show-all-levels="false"
						clearable
						style="width: 100%"
						placeholder="请选择语言"
						@change="langChange"
					></el-cascader>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-position"
						@click="runBtn"
						>运行</el-button
					>
				</el-form-item>
			</el-form>
		</el-header>
		<el-row class="container-row">
			<el-col :span="12"
				><MonacoEditor
					:code="code"
					:language="language"
					:key="randomkey"
					theme="vs"
					:editorOptions="editorOptions"
					contextmenu="false"
					@mounted="onMounted"
					@codeChange="onCodeChange"
				>
				</MonacoEditor
			></el-col>
			<el-col :span="12"
				><div class="code-editor-result">
					<el-input
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 6 }"
						readonly
						v-model="resultCode"
					></el-input></div
			></el-col>
		</el-row>
	</el-container>
</template>

<script>
//// 添加key是为了保证唯一值，防止第一次加载，后端请求的数据反显不到编辑器上
//// 还可添加language属性，让编辑器识别语言，例如language="sql"
// import monacoEditor from "./components/monacoIde.vue";
import MonacoEditor from "vue-monaco-editor";
import "monaco-editor/dev/vs/loader.js";
// require.config({ paths: { vs: "monaco-editor/min/vs" } });
export default {
	components: {
		MonacoEditor,
	},
	data() {
		return {
			editor: null,
			code: "console.log(12313)",
			language: "java",
			editorOptions: {
				selectOnLineNumbers: true,
				autoClosingBrackets: "always",
				autoClosingDelete: "always",
				autoClosingQuotes: "always",
				renderLineHighlight: "all",
				minimap: {
					// 关闭代码缩略图
					enabled: false, // 是否启用预览图
				},
				scrollbar: {
					verticalScrollbarSize: 4, // 垂直滚动条宽度，默认px
					horizontalScrollbarSize: 4, // 水平滚动条高度
				},
				scrollBeyondLastLine: false,
				overviewRulerBorder: false,
				automaticLayout: true,
				contextmenu: false,
				readOnly: false,
				acceptSuggestionOnCommitCharacter: true, // 接受关于提交字符的建议
				acceptSuggestionOnEnter: "on", // 接受输入建议 "on" | "off" | "smart"
			},

			randomkey: 1231231,
			langsList: [],
			langsProps: {
				value: "lang",
				emitPath: false,
				// checkStrictly: true,
				label: "text",
			},
			form: {
				langs: [],
			},
			resultCode: "",
		};
	},
	mounted() {
		this.renderLangs();
	},
	methods: {
		onMounted(editor) {
			self.MonacoEnvironment = {
				getWorkerUrl: function (moduleId, label) {
					if (label === "json") {
						return "./json.worker.bundle.js";
					}
					if (label === "css") {
						return "./css.worker.bundle.js";
					}
					if (label === "html") {
						return "./html.worker.bundle.js";
					}
					if (label === "typescript" || label === "javascript") {
						return "./ts.worker.bundle.js";
					}
					return "./editor.worker.bundle.js";
				},
			};
			this.editor = editor;
			// this.tip();
			// 设置编辑器语言
			// this.completionItemProvider =
			// 	monaco.languages.registerCompletionItemProvider(language, {
			// 		triggerCharacters: [" ", ".", ...this.triggerCharacters],
			// 		provideCompletionItems: (model, position) =>
			// 			this.sqlSnippets.provideCompletionItems(
			// 				model,
			// 				position
			// 			),
			// 	});
		},
		onCodeChange() {
			var val = this.editor.getValue();

			console.log(val);
			// this.resultCode = val;
		},
		// createRamdomKey随机生成值，其值类似于id。该方法最为重要，在给code赋值之后，调用这个方法
		createRamdomKey() {
			return Math.floor(Math.random() * (10, 1000000012313));
		},
		async renderLangs() {
			var res = await this.$API.webide.langs.get();
			this.langsList = res.data;
			if (this.langsList.length > 0) {
				var item = this.langsList[0];
				if (item != null) {
					this.form.langs = item.lang;
					this.code = item.examples;
					this.language = item.lang;
					this.randomkey = this.createRamdomKey();
				}
			}
		},
		async langChange(data) {
			console.log("lang change data :", data);
			console.log("进入循环");
			var that = this;
			this.langsList.forEach(async (item) => {
				console.log("进入循环开始");
				if (item.lang == data) {
					console.log("找到了值", item);
					this.$nextTick(() => {
						that.code = item.examples;
						this.language = data;
						this.randomkey = this.createRamdomKey();
					});
					return;
				}
			});
			console.log("退出循环");
		},
		async runBtn() {
			var code = this.editor.getValue();
			var lan = this.language;
			var res = await this.$API.webide.run.post({ code: code, lan: lan });
			console.log("运行结果：", res);
			this.resultCode = res.data;
		},
	},
};
</script>
<style scoped lang="scss">
.the-code-editor-container,
.code-editor-result {
	width: 100%;
	min-height: 100px;
	height: 100%;
	overflow: auto;
}

.code-editor-result {
	background-color: white;
	width: 100%;
	//margin-left: 20px;
	padding-left: 20px;
}
.container-row {
	width: 100%;
	height: calc(100% - 103px);
}
</style>
